<template>
	<view class="contain" :style="`height: ${screenHeight}px;`">
		<uv-sticky offset-top="0">
			<view class="bg-white header">
				<view class="search flex items-center pl-2">
					<view style="width: 86%;">
						<uni-search-bar clearButton="auto" @clear="clear" v-model="orderId" radius="20"
							cancelButton="none" :placeholder="placeholder" bgColor="#EEEEEE" @blur="inpBlur"
							@focus="inpFocus">
							<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
						</uni-search-bar>
					</view>
					<uv-button @click="doSearch" type="primary" size="small" class="ml-2 mr-2" text="搜索"></uv-button>
				</view>
				<!-- 时间选择 -->
				<view class="time  flex justify-around">
					<view @click="doTime(index)" class="pl-4 pr-4 pt-1 pb-1 rounded-3xl"
						:class="{'bg-blue-100': index===timeIndex}" v-for="(item, index) in timeList" :key="item.name">
						{{item.name}}
					</view>
				</view>
				<!-- 订单状态选择 -->
				<view class="time pt-2 flex justify-around">
					<view class=" status relative" @click="doOrderStatus(index)"
						:class="{ 'active': (index - 1)   === form.flag ||( !index  && form.flag === 3)}"
						v-for="(item, index) in payList" :key="item.name">
						{{ item.name }}
					</view>
				</view>
			</view>
		</uv-sticky>
		<view class="list-box" :style="`height: ${screenHeight - 130}px;`">
			<scroll-view scroll-y="true" class="scroll-Y">
				<OrderItem @getOrderDetails="getOrderDetails" v-for="info in list" :info="info" :flag="form.flag" />
			</scroll-view>
		</view>
	</view>

</template>

<script setup>
	import dayjs from 'dayjs'
	const placeholder = ref('搜索')
	const list = ref([{
		name: '全部'
	}, {
		name: '今天'
	}, {
		name: '昨天',
	}, {
		name: '一周'
	}, {
		name: '一月'
	}])
	const timeIndex = ref(0)
	const statusIndex =ref(0)
	const orderStatus = ref([{
		name: '全部'
	}, {
		name: '待付款',
	}, {
		name: '待发货',
	}, {
		name: '未签收'
	}])
	const isFocused = ref(false)
	const form = ref({
		"endTime": dayjs().format("YYYY-MM-DD 23:59:59"),
		"flag": 0,
		"orderId": 0,
		"payStatus": 0,
		"sign": 0,
		"startTime": dayjs().format("YYYY-MM-DD 00:00:00"),
		"transferStatus": 0,
		"userId": 0
	})
	const screenHeight = computed(() => {
		return uni.getSystemInfoSync().windowHeight
	})
	
	const doTime = (index) => {
		console.log('点击时间', index);
		timeIndex.value = index
	}
	const doOrderStatus = (index) => {
		statusIndex.value = index
	}
	const search = () => {
		uni.showToast({
			title: '搜索'
		})
	}
	const inpBlur = () => {
		placeholder.value = '搜索'
	}
	const inpFocus = () => {
		placeholder.value = '请输入订单号'
	}
	
	watch(timeIndex, (index) => {
		console.log('index', index);
		console.log(form.value); 
		let	startTime  
		switch (index) {
			case 1:
				form.value.endTime = dayjs().format("YYYY-MM-DD 23:59:59");
				form.value.startTime = dayjs().format("YYYY-MM-DD 00:00:00");
				break;
			case 2:
			startTime = new Date(dayjs().format("YYYY-MM-DD 00:00:00"));
			const endTime = new Date(dayjs().format("YYYY-MM-DD 23:59:59")); 
				endTime.setTime(endTime.getTime() - 3600 * 1000 * 24);
				startTime.setTime(startTime.getTime() - 3600 * 1000 * 24);
				form.value.endTime = dayjs(endTime).format("YYYY-MM-DD 23:59:59")
				form.value.startTime = dayjs(startTime).format("YYYY-MM-DD 00:00:00")
				break;
			case 3:
			startTime = new Date(dayjs().format("YYYY-MM-DD 00:00:00"));
			 	form.value.endTime =  dayjs().format("YYYY-MM-DD 23:59:59")
				startTime.setTime( startTime.getTime() - 3600 * 1000 * 24 * 7);
				form.value.startTime = dayjs(startTime).format("YYYY-MM-DD 00:00:00")
				break;
			case 4:
			startTime = new Date(dayjs().format("YYYY-MM-DD 00:00:00"));
				form.value.endTime =  dayjs().format("YYYY-MM-DD 23:59:59")
				startTime.setTime(startTime.getTime() - 3600 * 1000 * 24 * 30);
				form.value.startTime = dayjs(startTime).format("YYYY-MM-DD 00:00:00")
				break;
			default:
				form.value.endTime = dayjs().format("YYYY-MM-DD 23:59:59");
				form.value.startTime = dayjs().format("YYYY-MM-DD 00:00:00");
		}
	})
</script>
<style lang="scss" scoped>
	.contain {
		.header {
			height: 130px;
		}

		.status {
			&::after {
				content: '';
				position: absolute;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
				width: 50%;
				height: 3px;
				display: block;
				transition: width 0.3s ease;
				/* 添加过渡效果 */
			}
		}

		.active::after {
			width: 100%;
			/* 点击时触发宽度变化 */
			background-color: #ee0a24;
		}
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}



	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}




	.list-box {
		box-sizing: border-box;
		overflow-y: auto;
		background: #f2f2f2;
	}
</style>